<template>
<el-upload drag :action="url" :before-upload="beforeUploadHandle" :data="dataObj" :on-success="successHandle" :multiple="multiple" :file-list="fileList">
  <div v-if="multiple">
    <img v-if="imageUrl && !multiple" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </div>
  <div v-if="!multiple">
    <img v-if="imageUrl && !multiple" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </div>
</el-upload>
</template>

<script>
import {
  getUUID
} from '@/utils'
export default {
  data() {
    return {
      multiple: true,
      imageUrl: "",
      url: '',
      num: 0,
      urlList: [],
      successNum: 0,
      fileList: [],
      bussKey: 'common',
      dataObj: {},
    }
  },
  methods: {
    init(multiple, url, bussKey) {
      this.multiple = multiple == undefined ? this.multiple : multiple
      this.imageUrl = url
      this.bussKey = bussKey ? bussKey : this.bussKey
      console.log("this.bussKey:" + this.bussKey)
      this.$http({
        url: this.$http.adornUrl(`/service/oss/policy?bussKey=` + this.bussKey),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({
        data
      }) => {
        if (data && data.code === 0) {
          this.dataObj.key = data.dir
          this.dataObj.policy = data.policy
          this.dataObj.OSSAccessKeyId = data.accessid
          this.dataObj.success_action_status = 200
          this.dataObj.callback = ''
          this.dataObj.signature = data.signature
          console.log("上传时携带的参数1: " + JSON.stringify(this.dataObj))

          this.url = data.host
        }
      })
    },
    // 上传之前
    beforeUploadHandle(file) {
      console.log("调用了beforeUploadHandle方法")

      if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        this.$message.error('只支持jpg、png、gif格式的图片！')
        return false
      }
      this.dataObj.key = this.dataObj.key + "/" + getUUID() + "_" + file.name;
      console.log("上传时携带的参数2: " + JSON.stringify(this.dataObj))
      this.num++
    },
    // 上传成功
    successHandle(response, file, fileList) {
      console.log("上传成功")
      this.fileList = fileList
      this.successNum++
      console.log("上传成功得到的响应:" + JSON.stringify(response))
      if (this.multiple) {
        this.$confirm('操作成功, 是否继续操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          this.visible = false
        })
      }
      //this.imageUrl = response.url
      console.log("上传成功后的参数: " + JSON.stringify(this.dataObj))
      this.imageUrl = this.url + "/" + this.dataObj.key
      this.urlList.push(this.imageUrl)
      this.fileList = []
      this.$emit('refreshDataList', this.urlList)
    },
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 178px;
  height: 178px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
</style>
